<style>

    body {
        background-color: #f4f4f4;
    }

    .select-box {
        display: flex;
        flex-direction: column;
        padding: 16px 0;
        background-color: white;
    }

    .select-item {
        font-size: 15px;
        font-weight: 400;
        color: #4D4D4D;
        padding: 3px 10px;
        background-color: #FFF;
        border-radius: 4px;
        margin-left: 10px;
        cursor: pointer;
    }

    .active-item {
        color: #FFFFFF;
        background-color: #4B5BDE;
    }

    .select {
        width: 120px;
        height: 31px;
        border-color: #D2D6DE;
        margin-right: 10px;
    }

    #distributor {
        height: 31px;
    }

    .search_distributor {
        background-color: #4A5BDD;
        color: white;
        height: 31px;
        line-height: 31px;
        width: 60px;
        text-align: center;
    }

    .all_title{
        text-align: center;
        font-size: 18px;
    }
    .all_num{
        text-align: center;
        font-size: 32px;
    }

    .type-item {
        width: 110px;
        height: 34px;
        line-height: 34px;
        background: #EEF2F2;
        border-radius: 5px;
        margin-right: 20px;
        text-align: center;
        cursor: pointer;
    }

    .type-active {
        color: #6071EB;
        outline: 1px solid #818FEE;
    }
</style>

<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">

<form class="form-horizontal form-commonsearch nice-validator n-default n-bootstrap" novalidate role="form"
      method="POST" action="">
    <div class="select-box" id="search_area">
        <div style="display: flex;align-items: center;">
            <div style="color: #838989;margin-left: 20px;">渠道主体</div>
            <div class="select-item distributor_type" :class="currentChannel == index ? 'active-item' : ''" @click="selectChannel(index)"
                 v-for="(item,index) in channelList" :key=index>{{item}}</div>
            <div style="width: 450px;display: flex;align-items: center; margin-left: 20px;">
                <div style="color: #838989;width: 80px;">发行时间</div>
                <el-date-picker
                        size="small"
                        v-model="date"
                        prefix-icon="el-icon-date"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        align="right" @change="changeDate" >

                </el-date-picker>
            </div>
        </div>
    </div>
</form>
<div class="panel panel-default panel-intro">
    {:build_heading()}

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        {:build_toolbar('refresh')}
<!--                        <div class="dropdown btn-group {:$auth->check('user/user/multi')?'':'hide'}">-->
<!--                            <a class="btn btn-primary btn-more dropdown-toggle btn-disabled disabled" data-toggle="dropdown"><i class="fa fa-cog"></i> {:__('More')}</a>-->
<!--                            <ul class="dropdown-menu text-left" role="menu">-->
<!--                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=normal"><i class="fa fa-eye"></i> {:__('Set to normal')}</a></li>-->
<!--                                <li><a class="btn btn-link btn-multi btn-disabled disabled" href="javascript:;" data-params="status=hidden"><i class="fa fa-eye-slash"></i> {:__('Set to hidden')}</a></li>-->
<!--                            </ul>-->
<!--                        </div>-->
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover table-nowrap"
                           data-operate-edit="{:$auth->check('user/user/edit')}"
                           data-operate-del="{:$auth->check('user/user/del')}"
                           width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>
